import { useSelector, useDispatch } from 'react-redux'
import { Input, Select, Space, Checkbox, Form } from 'antd'
import { updateSchema } from '../../../../store/modules/schemaSlice'

export default function () {
  const schema = useSelector(state => (state as any).schema)
  const dispatch = useDispatch()
  const value = schema.data[schema.currentIndex] && schema.data[schema.currentIndex].props.text
  const [form] = Form.useForm()


  const handleInput = (e: any) => {
    dispatch(updateSchema(e.target.value))
    console.log(schema.data[schema.currentIndex])
  }

  const handleChange = () => {
    console.log('change')
  }

  const onChange = () => {
    console.log('check')
  }


  return (
    <>
      <div>设置</div>
      currentTYpe: {schema.currentType} {schema.currentIndex}
      {
        schema.data.map((c: any) => {
          return (
            <Form form={form} >
              <Form.Item label="标题内容">
                <Input />
              </Form.Item>
              <Form.Item label="层级">
                <Space wrap>
                  <Select
                    defaultValue="lucy"
                    style={{ width: 120 }}
                    onChange={handleChange}
                    options={[
                      { value: 'jack', label: 'Jack' },
                      { value: 'lucy', label: 'Lucy' },
                      { value: 'Yiminghe', label: 'yiminghe' },
                      { value: 'disabled', label: 'Disabled', disabled: true },
                    ]}
                  />
                </Space>
              </Form.Item>
              <Form.Item label="居中显示">
                <Checkbox onChange={onChange}></Checkbox>
              </Form.Item>
            </Form>
          )
        })
      }
    </>
  )
}